<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .content{
                width: 100%;
                height: 500px;
                background-color: antiquewhite;
                position: relative;
                
        }
        p{
            position: absolute;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="content">
      

    </div>
    <div><input type="text"><button>发射</button></div>
    <script>
        // 获取所需元素
        let content = document.querySelector('.content')
        let input = document.querySelector('input')
        let button =  document.querySelector('button')
        // 点击button时
        button.onclick = function(){
            // 获取输入框的内容
            let val =  input.value
            // 创建元素
            let p = document.createElement('p')
            p.innerHTML = val
            // 设置样式
            let left = content.offsetWidth
            // 设置颜色
            p.style.color = `rgb(${setredom(255,0)},${setredom(255,0)},${setredom(255,0)})`
            p.style.left = left+'px'
            p.style.top = setredom(300,0) + 'px'
            // 插入元素
            content.appendChild(p)

            setInterval(()=>{
                left--
                p.style.left = left+'px'
            },10)
        }

        // 生成随机数
        function setredom(max,min) {

            return Math.floor(Math.random()*(max-min)+min)
            
        }

        console.log(setredom(255,0));
        

    </script>
</body>
</html>